<!--
* @FileDescription: 实时综合信息
* @Author: yuec621@outlook.com
* @Date: 2025-09-18 11:12:34
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-09-22 16:32:27
-->

<template>
  <div class="pagestyle">
    <div v-for="(item,index) in state.tableList" :key="index" style="height: 40%;
    margin-bottom: 10px;">
      <list_controller :ref="'zujianname'+index" :options="item" :showCaozuo="true">
        <template v-slot:listSS="{ row, field }">
          <div v-if="field == 'accumulationTime'">{{computTime(row)}}</div>
          <div v-if="field == 'durationTime'">{{computTimet(row)}}</div>
          <div v-if="field == 'cutAccumulationTime'">{{computTimec(row)}}</div>
        </template>
        <template v-slot:selectNamelist>
          {{item.label}}</template>
      </list_controller>
    </div>
 </div>
</template>
<script setup>
  import list_controller from "@/components/commonCom/list_controller";
  import {
    computed,
    reactive
  } from "vue";
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  import axios from "@/utils/request";
  import usePagesStore from "@/store/modules/pages";
  import {
    ElMessage,
  } from "element-plus";
  import {
    searchareaTree
  } from "@/api/config";
  const {
    proxy
  } = getCurrentInstance();
  const store = usePagesStore();
  let state = reactive({
    tableList: [{
        label: '报警信息',
        refreshShow: true,
        queryList: {
          querys: []
        },
        listSS: [{
          field: "accumulationTime"
        }],
        tableheads: computed(() => table_headers.synthesisRealAlarm),
        dataUrl: '/realPointAlarm/listRealPointAlarms'
      },
      {
        label: '断电信息',
        refreshShow: true,
        queryList: {
          querys: []
        },
        listSS: [{
          field: "cutAccumulationTime"
        }],
        tableheads: computed(() => table_headers.synthesisRealCut),
        dataUrl: '/realPointCut/listPointCuts '
      },
      {
        label: '馈电异常',
        refreshShow: true,
        queryList: {
          querys: []
        },
        listSS: [{
          field: "durationTime"
        }],
        tableheads: computed(() => table_headers.synthesisRealFeed),
        dataUrl: '/realPointFeed/listPointFeeds'
      },
      {
        label: '故障信息',
        refreshShow: true,
        queryList: {
          querys: []
        },
        listSS: [{
          field: "durationTime"
        }],
        tableheads: computed(() => table_headers.synthesisFaultInfo),
        dataUrl: '/realStationData/faultInfo'
      }
    ],
    detailsList: [],
    tempList: [],
    fillayaComShow: false, //控制填写分析抽屉显示
    listBtnType: undefined,
    options: {
      queryList: {
        querys: [],
      },
      dataUrl: "/hisPointCut/listPointCuts",
    },
    editId: undefined,
    banciList: [],
    showCaozuo: true,
    data: {},
    areaObj: {
      condition: 'A'
    },
    descObj: {},
    showChart: false,
    chartData: {},
  });
 
  function getbanciList() {
    axios.post("/class/info/searchAll", {}).then((res) => {
      state.banciList = res.data.list;
      state.options.queryList.querys.forEach((item) => {
        if (item.fieldsearch == "banci") {
          item.options = res.data.list.map((item) => {
            return {
              label: item.className,
              value: item.id,
            };
          });
          item.binddata = item.options[0].value
        }
      });
    });
  }
  getbanciList();

  function banciList(dataObj) {
    axios.post("/hisPointFeed/handleClassInfo", dataObj).then((res) => {
      state.options.queryList.querys.forEach((item) => {
        if (dataObj.typeLabel != 2 || state.options.queryList.querys[0].binddata == 2) {
          if (item.type == "datetimestartEnd") {
            item.binddata = [res.data.feedStartTime, res.data.feedEndTime];
          }
        }
      });
    });
  }

  function getSelList() {
    axios.post("/hisPointFeed/listAllNames", {
      flag: false
    }).then((res) => {
      state.options.queryList.querys.forEach((item) => {
        if (item.field == "condition") {
          item.options = res.data
        }
      });
    });
    searchareaTree().then((res) => {
      state.options.queryList.querys.forEach((item) => {
        if (item.field == "area") {
          item.options = res.data;
        }
      });
    });
  }

  function getconditionList(val) {
    axios
      .post("/hisPointFeed/conditionList", val)
      .then((res) => {
        state.options.queryList.querys.forEach((item) => {
          if (item.type == "cascaderRadioSpecial") {
            item.options = res.data;
          }
        });
      });
  }
  getconditionList(state.areaObj)
  getSelList();

  const getcontrolPortsList = (val) => {
    axios.post("/station/list", {}).then((res) => {
      state.options.queryList.querys.forEach(itemsub => {
        if (itemsub.field == 'stationCode') {
          itemsub.options = res.data.list.map(item => {
            return {
              label: item.stationCode,
              value: item.stationCode
            }
          })
        }
      })
    });
  };
  getcontrolPortsList()
  const computTime = (row) => {
    if (row.accumulationTime) {
      setInterval(() => {
        const now = new Date(); // 当前时间
        const target = new Date(row.alarmStartTime); // 目标时间
        const diff = Math.abs(now - target); // 时间差（毫秒）
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
        const minutes = Math.floor((diff / (1000 * 60)) % 60);
        const seconds = Math.floor((diff / 1000) % 60);
        row.accumulationTime = `${days}天${hours}时${minutes}分${seconds}秒`;
      }, 1000);
    } else {
      const now = new Date(); // 当前时间
      const target = new Date(row.alarmStartTime); // 目标时间
      const diff = Math.abs(now - target); // 时间差（毫秒）
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
      const minutes = Math.floor((diff / (1000 * 60)) % 60);
      const seconds = Math.floor((diff / 1000) % 60);
      row.accumulationTime = `${days}天${hours}时${minutes}分${seconds}秒`;
    }
      return row.accumulationTime
  }
    const computTimet = (row) => {
    if (row.durationTime) {
      setInterval(() => {
        const now = new Date(); // 当前时间
        const target = new Date(row.startTime); // 目标时间
        const diff = Math.abs(now - target); // 时间差（毫秒）
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
        const minutes = Math.floor((diff / (1000 * 60)) % 60);
        const seconds = Math.floor((diff / 1000) % 60);
        row.durationTime = `${days}天${hours}时${minutes}分${seconds}秒`;
      }, 1000);
    } else {
      const now = new Date(); // 当前时间
      const target = new Date(row.startTime); // 目标时间
      const diff = Math.abs(now - target); // 时间差（毫秒）
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
      const minutes = Math.floor((diff / (1000 * 60)) % 60);
      const seconds = Math.floor((diff / 1000) % 60);
      row.durationTime = `${days}天${hours}时${minutes}分${seconds}秒`;
    }
      return row.durationTime
  }
   const computTimec = (row) => {
    if (row.cutAccumulationTime) {
      setInterval(() => {
        const now = new Date(); // 当前时间
        const target = new Date(row.cutStartTime); // 目标时间
        const diff = Math.abs(now - target); // 时间差（毫秒）
        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
        const minutes = Math.floor((diff / (1000 * 60)) % 60);
        const seconds = Math.floor((diff / 1000) % 60);
        row.cutAccumulationTime = `${days}天${hours}时${minutes}分${seconds}秒`;
      }, 1000);
    } else {
      const now = new Date(); // 当前时间
      const target = new Date(row.cutStartTime); // 目标时间
      const diff = Math.abs(now - target); // 时间差（毫秒）
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
      const minutes = Math.floor((diff / (1000 * 60)) % 60);
      const seconds = Math.floor((diff / 1000) % 60);
      row.cutAccumulationTime = `${days}天${hours}时${minutes}分${seconds}秒`;
    }
      return row.cutAccumulationTime
  }
</script>

<style lang="scss" scoped>
  .pagestyle {
    height: calc(100vh - 150px);
    overflow-y: auto;
  }

  .xiazai {
    position: absolute;
    top: 42px;
    right: 110px;
    width: 120px;
    height: 64px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background-color: #ffff;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    border-radius: 2px;
    z-index: 99;

    .item {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .item:hover {
      background-color: #ececec;
    }
  }

  ::v-deep .el-drawer {
    .querycss {
      .fsc {
        &:nth-child(2) {
          display: none;
        }
      }
    }

    .table_box {
      .fsc {
        display: none;
      }
    }
  }
</style>